<template>
    <app style="width: 100%" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="headers">
            <el-input style="width: 200px" v-model="searchUser" @keyup.enter.native="search" placeholder="搜索用户" />
            <el-tooltip content="搜索 用户名、姓名、工号、用户ID" placement="top">
             <el-button type="primary" style="margin-left:5px " @click="search">搜索</el-button>
            </el-tooltip>
            <el-button type="primary" style="margin-left:10px ">注册模板下载</el-button>
            <el-button type="primary" style="margin-left:10px ">批量导入添加</el-button>
        </div>
        <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
                <span>{{addDepartmentName+' ID:'+addDepartment}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goToHomeDepartments">返回</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" @click="addDepartmentImpl()"  >在当前部门下添加下级部门</el-button>
            </div>
            <el-button class="button" v-for="result in subsetDepartments" :key="result" type="info" @click="chiliButtonOnDepartments(result.id,result.name)">{{result.name}}</el-button>

        </el-card>
        <div style="width: 100%">
            <el-button style="float: right" type="text" @click="addDepartmentsPeople(1)">添加部门人员</el-button>
            <el-button v-if="fromMoveDepartment.userId.length > 0" style="float: right;margin-right: 10px" type="text" @click="moveDepartmentsPeople">移出选中部门人员</el-button>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="jobNumber"
                        label="工号">
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        >
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="fromMoveDepartment.userId"  @change="fromMoveDepartmentChange">
                            <el-checkbox :label="scope.row.id">|</el-checkbox>
                        <el-button @click="handleClick(scope.row.id)" type="text" size="small">详细信息</el-button>
                        <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除</el-button>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>


            <div>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-count=pageSize
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
            <div>

                    <el-dialog  title="未加入部门人员" :visible.sync="dialogTableVisible">


                        <el-table
                                :data="notDepartmentData"
                                style="width: 80%">
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="工号">
                            </el-table-column>
                            <el-table-column
                                    prop="departmentName"
                                    label="部门">
                            </el-table-column>
                            <el-table-column
                                    prop="null"
                                    label="">
                                <template slot-scope="scope">
                                    <el-checkbox-group v-model="fromAddDepartment.userId"  @change="handleCheckedCitiesChange">
                                        <el-checkbox :label="scope.row.id">|</el-checkbox>
                                    </el-checkbox-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    <el-pagination
                            layout="prev, pager, next"
                            :page-count=dialogpageSize
                            :current-page="dialogPage"
                            @current-change="dialogCurrentChange">
                    </el-pagination>
                    <el-button type="success" @click="sumberNotDepartments">提交</el-button>
                </el-dialog>
                <el-dialog title="详细信息" :visible.sync="detailedInformationVisible">
                    <span>用户名:{{detailedInformation.username}}</span><br>
                    <span>工号:{{detailedInformation.jobNumber}}</span><br>
                    <span>姓名:{{detailedInformation.name}}</span><br>
                    <span>是否有补贴:{{detailedInformation.subsidyStatus}}</span><br>
                    <span>备注:{{detailedInformation.info}}</span><br>
                    <span>账号启用状态:{{detailedInformation.userStatus}}</span><br>
                    <span>手机号码:{{detailedInformation.phone}}</span><br>
                    <span>创建时间:{{detailedInformation.created}}</span><br>
                    <span>修改时间:{{detailedInformation.updated}}</span><br>
                    <span>顺序:</span><span v-for="resultDetailed in parentDepartment" :key="resultDetailed">{{resultDetailed.name}}></span><br>
                </el-dialog>
            </div>
        </div>
    </app>
</template>

<script>
    export default {
        name: "userManagement",
        data(){
            return{
                gridData:{},
                loading: false,
                searchUser:'',
                tableData:[],
                pageSize:1,
                subsetDepartments:[],
                departmentName:'',
                addDepartment:'',
                addDepartmentName:'',
                formDepartment:{
                    mainDepartmentId:'',
                    addedDepartment:''
                },
                notDepartmentData:[],
                dialogTableVisible: false,
                dialogpageSize:1,
                fromAddDepartment:{
                    departmentId:'',
                    userId:[]
                },
                fromMoveDepartment:{
                    departmentId:'',
                    userId:[]
                },
                detailedInformationVisible:false,
                detailedInformation:{
                    username:'',
                    jobNumber:'',
                    name:'',
                    idCard:'',
                    subsidyStatus:'',
                    info:'',
                    sex:'',
                    userStatus:'',
                    phone:'',
                    created:'',
                    updated:'',
                },
                parentDepartment:[],
                fullscreenLoading:false
            }
        },
        methods:{
            deleteClick(id){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.deleteUser(id)
                    .then(res=>{
                        if (res.code==200){
                            this.$message.success(res.message)
                        }else {
                            this.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClick(id) {
                this.detailedInformationVisible=true;
                this.$api.detailedInformation(id)
                .then(res=>{
                    this.detailedInformation.username=res.data.username;
                    this.detailedInformation.jobNumber=res.data.jobNumber;
                    this.detailedInformation.name=res.data.name;
                    this.detailedInformation.idCard=res.data.idCard;
                    this.detailedInformation.subsidyStatus=res.data.subsidyStatus;
                    this.detailedInformation.info=res.data.info;
                    this.detailedInformation.sex=res.data.sex;
                    this.detailedInformation.userStatus=res.data.userStatus;
                    this.detailedInformation.phone=res.data.phone;
                    this.detailedInformation.created=res.data.created;
                    this.detailedInformation.updated=res.data.updated;
                    this.parentDepartment=res.data.parentDepartment;
                })
            },
            addDepartmentImpl(){
                this.$prompt('请输入部门名称', '正在向《'+this.addDepartmentName+'》添加下级部门', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.fullscreenLoading=true;
                    this.formDepartment.addedDepartment=value;
                    this.formDepartment.mainDepartmentId=this.addDepartment;
                    this.$api.insterDepartments(this.formDepartment)
                    .then(res=>{
                        if (res.code==200){
                            this.$message.success(res.message);
                            this.fullscreenLoading=false;
                            this.getQueryingSubsetDepartments(this.addDepartment,this.addDepartmentName);
                        }else {
                            this.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            getQueryingSubsetDepartments(departmentId,departmentName){
                this.addDepartmentName=departmentName;
                this.addDepartment=departmentId;
                this.loading=true;
                this.$api.queryingSubsetDepartments(departmentId)
                .then(res=>{
                    if (res.data.length<=0&&res.code==200){
                        this.$message.success('已加载完')
                    }
                    this.loading=false;
                    this.subsetDepartments=res.data
                }).catch(err=>{
                    this.loading=false;
                    this.$message.error('网络错误')
                })
            },
            chiliButtonOnDepartments(id,departmentName){
                this.addDepartmentName=departmentName;
                this.addDepartment=id;
                this.getQueryingSubsetDepartments(id,departmentName);
                this.selectDepartmentUser(this.addDepartment,1);
            },
            selectDepartmentUser(departmentId,pageNum){

                this.$api.selectDepartmentUser(departmentId,pageNum)
                .then(res=>{

                    this.tableData=res.data.data;
                    this.pageSize=res.data.pages;
                })
            },
            goToHomeDepartments(){
                this.getQueryingSubsetDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
                this.selectDepartmentUser(localStorage.getItem('departmentId'),1);
            },
            handleCurrentChange: function (currentPage) {
                this.selectDepartmentUser(this.addDepartment,currentPage)
            },
            addDepartmentsPeople(pageNum){
                this.dialogTableVisible = true;
                this.$api.notDepartment(pageNum)
                .then(res=>{
                    this.notDepartmentData=res.data.data;
                    this.dialogpageSize=res.data.pages;
                })
            },
            sumberNotDepartments(){
                this.fromAddDepartment.departmentId=this.addDepartment;
                console.log(this.fromAddDepartment)
                this.$api.departmentAddPeopleParam(this.fromAddDepartment)
                .then(res=>{
                    if (res.code==200){
                        this.$message.success(res.message)
                        this.dialogTableVisible = false;
                        this.fromAddDepartment.userId=[];
                        this.selectDepartmentUser(this.addDepartment,1);
                    }
                })
            },
            handleCheckedCitiesChange(value) {
            },
            dialogCurrentChange(dialogPage){
                this.addDepartmentsPeople(dialogPage);
            },
            fromMoveDepartmentChange(value){

            },
            moveDepartmentsPeople(){
                this.fromMoveDepartment.departmentId=88;
                this.$api.departmentAddPeopleParam(this.fromMoveDepartment)
                .then(res=>{
                    if (res.code==200){
                        this.$message.success(res.message)
                        this.dialogTableVisible = false;
                        this.fromMoveDepartment.userId=[];
                        this.selectDepartmentUser(this.addDepartment,1);
                    }
                })
            },
            search(){
                this.$api.selectSubsetDepartmentUser(this.searchUser)
                .then(res=>{
                    if (res.code==200){
                        this.pageSize=1;
                        this.addDepartmentName='';
                        this.addDepartment='';
                        this.tableData=res.data;
                    }else {
                        this.$message.error(res.message);
                    }
                })
            },

        },
        mounted() {
            this.getQueryingSubsetDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
            this.selectDepartmentUser(localStorage.getItem('departmentId'),1);
        }

    }
</script>

<style scoped>
.headers{
    margin: 10px;
    width: 100%;
}


.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}
.box-card button{
    margin: 10px;
}
</style>